<template>
    <div class="container">
        <div class="data_analysis">
            <div class="return_button" @click="this.$router.back()">
                <img src="@/assets/img/返回箭头1.png" width="35" alt="">
                <p class="return_p">返回</p>
            </div>
            <div class="data_content">
                <schart class="data_canvas" canvasId="lineChart" :options="options"></schart>
                    <img src="@/assets/img/下载1.png" class="data_img" width="35" alt="">

                <el-tooltip placement="top" class="report_p">
                    <template #content>
                        ①心理健康通常在0—40分之间， 均值<br/>
                        为22分，一般不及12分者情绪很不稳<br/>
                        定，仅占人数分布的10%。<br/>
                        ②专业而有成就者通常总和分数介于10<br/>
                        —100分之间，平均为55分，60分约等<br/>
                        于标准分7，63分以上约等于标准分8、<br/>
                        9、10，总和67分以上者一般应有所成<br/>
                        就。<br/>
                        ③创造力强者标准分越高，其创造力越强。<br/>
                        ④在新环境中有成长能力总分介于4—40<br/>
                        分间，均值为22分。17分以下者(约占<br/>
                        10%)不太适应新环境，27分以上者有成<br/>
                        功的希望。
                    </template>
                    <i class="el-icon-warning-outline"></i>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
    import Schart from "vue-schart";

    export default {
        name: "DataAnalysis",
        components: {
            Schart
        },
        data() {
            return {
                options: {
                    type: 'line',
                    title: {
                        text: '数据分析',
                    },
                    bgColor: '#f5f5f5',
                    labels: ['6月', '7月', '8月', '9月', '10月'],
                    datasets: [{
                        label: '心理健康',
                        data: [234, 278, 270, 190, 230]
                    }, {
                        label: '专业而有成就',
                        data: [164, 178, 150, 135, 160]
                    }, {
                        label: '创造力强',
                        data: [194, 158, 220, 135, 320]
                    }, {
                        label: '新环境下成长力',
                        data: [114, 138, 200, 235, 190]
                    }]
                },
            }
        },

    }
</script>

<style scoped>
    .data_analysis{
        font-size: 21px;
    }
    .return_button {
        float: left;
        margin-top: 10px;
    }

    .return_button:hover {
        cursor: pointer;
    }

    .return_p {
        vertical-align: 10px;
        margin-left: 2px;
        display: inline-block;
    }
    .data_content{
        margin-left: 100px;
        width: 90%;
        text-align: center;
        background-color: #f5f5f5;
        border: 2px solid #ddd;
    }
    .data_canvas{
        display: inline-block;
        height: 400px;
        width: 80%;
    }
    .report_p {
        display: inline-block;
        font-weight: bold;
        vertical-align: 50px;
        font-size: 30px;
    }
    .data_img{
        display: inline-block;
        margin-right: 120px;
        vertical-align: 320px;
    }
</style>